<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		computed
	} from 'vue';
	import {
		BASE_URL
	} from "../../utils/api";

	const goToCurrentSlideDetail = () => {
	  const currentItem = intangibleHeritageSlides.value[currentSlide.value];
	  if (currentItem) {
	    uni.navigateTo({
	      url: `${currentItem.pageUrl}?id=${currentItem.id}`
	    });
	  }
	};

	const swiperList = ref([`${BASE_URL}/mine/bottom-bg.png`, `${BASE_URL}/mine/bottom-bg.png`,
		`${BASE_URL}/mine/bottom-bg.png`
	])

	const currentTab = ref(0);
	const title_content = ref(['游戏', '美食', '非遗']);
	const content_width = ref(430);
	const content_height = ref(932);
	const intangibleHeritageSlides = ref([{
	    imageUrl: `${BASE_URL}/culture/hakka-mountain-song.jpg`,
	    pageUrl: '/pages/index/cultureDetail/cultureDetail',
	    id: 1,
	    title: '客家山歌',
	    description: '龙川客家山歌传承千年，以即兴创作、情感真挚著称，反映客家人的劳动生活、爱情婚姻和风土人情。'
	}, {
	    imageUrl: `${BASE_URL}/culture/puppet-show.jpg`,
	    pageUrl: '/pages/index/cultureDetail/cultureDetail', 
	    id: 2,
	    title: '龙川木偶戏',
	    description: '集木偶制作、戏曲表演、音乐伴奏于一体的综合性民间艺术，深受群众喜爱。'
	}, {
	    imageUrl: `${BASE_URL}/culture/hakka-architecture.jpg`,
	    pageUrl: '/pages/index/cultureDetail/cultureDetail',
	    id: 3,
	    title: '客家围龙屋', 
	    description: '独特的圆形或方形围合式建筑，体现客家人的防御智慧、家族观念和建筑技艺。'
	}, {
	    imageUrl: `${BASE_URL}/culture/paper-cutting.jpg`,
	    pageUrl: '/pages/index/cultureDetail/cultureDetail',
	    id: 4,
	    title: '龙川剪纸',
	    description: '精巧细腻的剪纸技艺，图案寓意吉祥，是龙川民间艺术的瑰宝。'
	}, {
	    imageUrl: `${BASE_URL}/culture/tea-pounding.jpg`,
	    pageUrl: '/pages/index/cultureDetail/cultureDetail',
	    id: 5,
	    title: '客家擂茶制作技艺',
	    description: '独特的擂茶制作工艺，融合茶叶、草药、谷物，体现客家人的养生智慧。'
	}]);
	const currentSlide = ref(0);
	
	// 文化特色亮点
	const currentHighlights = computed(() => {
	  const highlights = {
	    1: [
	      { icon: '🎵', title: '独特旋律', description: '客家音调韵味十足' },
	      { icon: '💖', title: '情感真挚', description: '直抒胸臆表达情感' },
	      { icon: '🌾', title: '生活写照', description: '反映客家人生活' },
	      { icon: '📚', title: '文化传承', description: '千年历史代代相传' }
	    ],
	    2: [
	      { icon: '🎭', title: '精湛技艺', description: '木偶制作精细' },
	      { icon: '🎪', title: '生动表演', description: '角色栩栩如生' },
	      { icon: '🎼', title: '独特唱腔', description: '地方戏曲特色' },
	      { icon: '🏅', title: '省级非遗', description: '受重点保护' }
	    ],
	    3: [
	      { icon: '🏯', title: '独特建筑', description: '围龙屋造型' },
	      { icon: '🛡️', title: '防御功能', description: '安全保障完善' },
	      { icon: '🌬️', title: '冬暖夏凉', description: '居住舒适' },
	      { icon: '👨‍👩‍👧‍👦', title: '家族文化', description: '体现家族观念' }
	    ],
	    4: [
	      { icon: '✂️', title: '精巧细腻', description: '剪纸技艺精湛' },
	      { icon: '🎨', title: '图案吉祥', description: '寓意美好祝福' },
	      { icon: '🏮', title: '节庆装饰', description: '传统节日必备' },
	      { icon: '👐', title: '手工传承', description: '纯手工制作技艺' }
	    ],
	    5: [
	      { icon: '🍵', title: '独特工艺', description: '擂制技艺独特' },
	      { icon: '🌿', title: '养生保健', description: '草药配方养生' },
	      { icon: '👃', title: '香气浓郁', description: '茶香四溢扑鼻' },
	      { icon: '💪', title: '强身健体', description: '多重保健功效' }
	    ]
	  };
	  return highlights[currentSlide.value + 1] || highlights[1];
	});
	
	const relatedItems = computed(() => {
	  return intangibleHeritageSlides.value
	    .filter((_, index) => index !== currentSlide.value)
	    .map((item, index) => ({
	      image: item.imageUrl,
	      name: ['客家山歌', '龙川木偶戏', '客家围龙屋'][index],
	      type: ['传统音乐', '表演艺术', '建筑文化'][index],
	      index: intangibleHeritageSlides.value.findIndex(slide => slide.imageUrl === item.imageUrl)
	    }));
	});
	
	const cultureStats = ref({
	  heritageCount: '30+',
	  historyYears: '1000',
	  protectionLevel: '省级'
	});
	

	// 计算上一张图片的路径
	const prevImageSrc = computed(() => {
		const prevIndex = (currentSlide.value - 1 + intangibleHeritageSlides.value.length) %
			intangibleHeritageSlides.value.length;
		return intangibleHeritageSlides.value[prevIndex].imageUrl;
	});

	// 计算下一张图片的路径
	const nextImageSrc = computed(() => {
		const nextIndex = (currentSlide.value + 1) % intangibleHeritageSlides.value.length;
		return intangibleHeritageSlides.value[nextIndex].imageUrl;
	});

	// 当前显示的图片路径
	const currentImage = computed(() => intangibleHeritageSlides.value[currentSlide.value].imageUrl);

	// 添加缺失的变量
	const cultureImages = ref(intangibleHeritageSlides.value);
	const currentIndex = ref(0);

	// 添加切换幻灯片的方法
	const switchToSlide = (index) => {
		currentSlide.value = index;
		currentIndex.value = index;
	};

	// 切换到上一张图片
	const prevSlide = () => {
		currentSlide.value = (currentSlide.value - 1 + intangibleHeritageSlides.value.length) %
			intangibleHeritageSlides.value.length;
	};

	// 切换到下一张图片
	const nextSlide = () => {
		currentSlide.value = (currentSlide.value + 1 + intangibleHeritageSlides.value.length) %
			intangibleHeritageSlides.value.length;
		currentIndex.value = currentSlide.value;
	};

	// 进入游戏
	const goToPage = (pageUrl) => {
		uni.navigateTo({
			url: pageUrl
		});
	};

	const items = ref([{
	    image: `${BASE_URL}/food/longchuan-baba.jpg`,
	    description: '龙川粑粑 - 精选本地糯米，配以花生、芝麻等馅料，蒸制后软糯香甜，是客家传统节日的重要食品。'
	}, {
	    image: `${BASE_URL}/food/hakka-leicha.jpg`,
	    description: '客家擂茶 - 将绿茶、芝麻、花生、薄荷等原料在擂钵中研磨成粉，冲泡饮用，清香解渴，养生保健。'
	}, {
	    image: `${BASE_URL}/food/yuba.jpg`,
	    description: '龙川腐竹 - 选用优质黄豆，传统工艺制作，豆香浓郁，营养丰富，可炖汤、炒菜，做法多样。'
	}, {
	    image: `${BASE_URL}/food/cured-meat.jpg`,
	    description: '客家腊味 - 包括腊肠、腊肉、腊鸭等，经盐腌、日晒、风干而成，腊香扑鼻，风味独特。'
	}, {
	    image: `${BASE_URL}/food/taro-dumpling.jpg`,
	    description: '芋头饺 - 芋头蒸熟捣泥作皮，包裹猪肉、香菇等馅料，蒸制后芋香四溢，口感绵密。'
	}, {
	    image: `${BASE_URL}/food/rice-wine.jpg`,
	    description: '客家娘酒 - 用糯米酿造，酒色澄黄，味道甘甜，具有驱寒暖身、补气养血的功效。'
	}, {
	    image: `${BASE_URL}/food/stuffed-tofu.jpg`,
	    description: '酿豆腐 - 新鲜豆腐挖空填入肉馅，先煎后焖，豆腐嫩滑，肉馅鲜美，是客家代表性菜肴。'
	}]);

	// 美食模块点击事件处理
	const goToDetail = (item) => {
		// 提取图片文件名
		const imagePath = item.image
		const fileName = imagePath.split('/').pop()

		uni.navigateTo({
			url: `/pages/detail/detail?fileName=${fileName}`
		})
	}

	onShow(() => {});
</script>

<template>
	<view class="flex f-s-1 full column">
		<view class="indexTitle_view flex column j-c-s-b">
			<!--   todo:待实现轮播图   -->
			<!--      <view style='height: 500rpx'>
              <up-swiper :list = "swiperList" height = "350rpx" indicator indicatorModel = "line" :autoplay = 'true'
                         interval = '3000' circular></up-swiper>
            </view>-->
			<image :src="`${BASE_URL}/index/background-index.png`" mode="widthFix"
				style="width: 100%; position: absolute; z-index: -1"></image>
			<view class="flex pad-2 column j-c-s-b" style="padding-bottom: 0; height: 100%">
				<image style="width: 240rpx" :src="`${BASE_URL}/index/title.png`" mode="widthFix" />

			</view>
		</view>

		<view class="flex j-c-s-a" style="background-color: #e9beac;height: 32px;">
			<text :class="currentTab === index ? 'red_text' : ''" v-for="(item, index) in title_content"
				@click="currentTab = index" :key="index" class="f-s-3">
				{{ item }}
			</text>
		</view>

		<!-- 根据 currentTab 切换显示内容 -->
		<view class="indexContent_view pad-3 flex gap-3 column" style="margin-top: 32px;">
			<!-- 游戏内容 -->
			<view v-if="currentTab === 0">
				<view class="flex j-c-s-b">
					<image style="width: 200rpx" :src="`${BASE_URL}/game/level2.png`" mode="widthFix"></image>
					<image style="width: 380rpx" :src="`${BASE_URL}/game/level1.png`" mode="widthFix"></image>
				</view>
				<view class="flex j-c-s-b">
					<image style="width: 200rpx" :src="`${BASE_URL}/game/level5.png`" mode="widthFix"></image>
					<image style="width: 300rpx" :src="`${BASE_URL}/game/level8.png`" mode="widthFix"></image>
				</view>
				<view class="flex j-c-s-b" style="align-items: flex-end">
					<image style="width: 250rpx" :src="`${BASE_URL}/index/dragon.png`" mode="widthFix"></image>
					<view class="clound_view pad-4" style="padding-top: 120rpx">
						<image :src="`${BASE_URL}/index/clound.png`" mode="widthFix"
							style="width: 400rpx; position: absolute; z-index: -1; transform: translate(-18%, -40%)">
						</image>
						<text class="f-s-1">我叫叁叁，我是这趟龙川之旅的陪伴者，请跟随我一起探索龙川吧！</text>
					</view>
					<view class="flex column gap-1">
						<view class="flex gap-2" style="align-items: flex-end">
							<image style="width: 150rpx" :src="`${BASE_URL}/game/level7.png`" mode="widthFix"></image>
							<image style="width: 150rpx" :src="`${BASE_URL}/game/level6.png`" mode="widthFix"></image>
						</view>
						<button @click="goToPage('/pages/index/gameMap/gameMap')" class="game">进入游戏页面</button>
					</view>
				</view>
			</view>

			<!-- 美食内容 -->
			<view v-if="currentTab === 1">
				<view class="food-list">
					<view class="food-card" v-for="(item, index) in items" :key="index" @click="goToDetail(item)">
						<!-- 美食图片 -->
						<view class="food-image-container">
							<image :src="item.image" mode="aspectFill" class="food-image"></image>
							<view class="image-overlay"></view>
						</view>

						<!-- 美食描述 -->
						<view class="food-content">
							<view class="food-description">
								{{ item.description }}
							</view>
							<view class="food-arrow">
								<text class="arrow-icon">→</text>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 非遗内容 -->
			<view v-if="currentTab === 2">
				
			  <view class="cultural-showcase">
				  
				  <!-- 文化数据统计 -->
				  <view class="culture-stats">
				    <view class="stats-card">
				      <view class="stat-item">
				        <text class="stat-number">{{ cultureStats.heritageCount }}</text>
				        <text class="stat-label">非遗项目</text>
				      </view>
				      <view class="stat-divider"></view>
				      <view class="stat-item">
				        <text class="stat-number">{{ cultureStats.historyYears }}+</text>
				        <text class="stat-label">历史传承</text>
				      </view>
				      <view class="stat-divider"></view>
				      <view class="stat-item">
				        <text class="stat-number">{{ cultureStats.protectionLevel }}</text>
				        <text class="stat-label">保护级别</text>
				      </view>
				    </view>
				  </view>
				  
				  
			    <!-- 轮播主体 -->
			    <view class="showcase-main">
			      <!-- 左侧预览和按钮 -->
			      <view class="showcase-side showcase-left">
			        <view class="preview-frame preview-prev">
			          <image :src="prevImageSrc" class="preview-image" mode="aspectFill" />
			          <view class="preview-overlay"></view>
			        </view>
			        <view class="nav-trigger nav-prev" @click="prevSlide">
			          <image :src="`${BASE_URL}/culture/herigate4.png`" class="nav-arrow" />
			          <view class="nav-glow"></view>
			        </view>
			      </view>
			
			      <!-- 主图展示 -->
			      <view class="showcase-center">
			        <view class="main-display">
			          <image :src="currentImage" class="display-image" mode="aspectFill" />
			          <view class="display-frame"></view>
			          <view class="display-shine"></view>
			        </view>
					
					<!-- 主图名称 -->
					<view class="main-title">
						{{ intangibleHeritageSlides[currentSlide]?.title }}
					</view>
					
			        <!-- 指示器 -->
			        <view class="showcase-indicator">
			          <text class="indicator-dot" v-for="(img, index) in intangibleHeritageSlides" :key="index"
			            :class="{ active: index === currentSlide }" @click="switchToSlide(index)">
			          </text>
			        </view>
			      </view>
			
			      <!-- 右侧预览和按钮 -->
			      <view class="showcase-side showcase-right">
			        <view class="nav-trigger nav-next" @click="nextSlide">
			          <image :src="`${BASE_URL}/culture/herigate5.png`" class="nav-arrow" />
			          <view class="nav-glow"></view>
			        </view>
			        <view class="preview-frame preview-next">
			          <image :src="nextImageSrc" class="preview-image" mode="aspectFill" />
			          <view class="preview-overlay"></view>
			        </view>
			      </view>
			    </view>
			
			    <!-- 详情按钮 -->
			    <view class="cultural-action">
			      <view class="action-btn" @click="goToCurrentSlideDetail">
			        <view class="btn-ornament btn-ornament-left"></view>
			        <view class="btn-main">
			          <text class="btn-text">探索非遗</text>
			          <text class="btn-icon">⟶</text>
			        </view>
			        <view class="btn-ornament btn-ornament-right"></view>
			        <view class="btn-glow"></view>
			      </view>
			    </view>
				
			
			    <!-- 文化特色亮点 -->
			    <view class="cultural-highlights">
			      <view class="highlights-header">
			        <text class="highlights-title">文化特色亮点</text>
			        <view class="title-decoration">
			          <view class="decoration-line"></view>
			          <text class="decoration-icon">✨</text>
			          <view class="decoration-line"></view>
			        </view>
			      </view>
			      
			      <view class="highlights-grid">
			        <view class="highlight-item" v-for="(highlight, index) in currentHighlights" :key="index">
			          <view class="highlight-icon">
			            <text>{{ highlight.icon }}</text>
			          </view>
			          <text class="highlight-title">{{ highlight.title }}</text>
			          <text class="highlight-desc">{{ highlight.description }}</text>
			        </view>
			      </view>
			    </view>
			  </view>
			</view>
		</view>
	</view>
</template>

<style>
	.indexTitle_view {
		height: 485rpx;
		position: relative;
	}

	.indexContent_view {
		background: linear-gradient(to bottom, white 0%, #e4efcd 36.22%, #e1edc7b3 74.14%, white 100%);
	}

	.game {
		background-color: #9ab593;
		color: #fff;
		border-radius: 32px;
	}

	.clound_view {
		box-sizing: border-box;
		width: 400rpx;
		height: 330rpx;
		position: absolute;
		right: 5%;
		transform: translateY(-50%);
		z-index: 2;
	}

	.red_text {
		color: #bd0404;
		font-weight: bold;
	}

	.image-switcher {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30px;
		gap: 7px;
		position: relative;
		z-index: 2;
	}

	.main-image-container {
		width: 690px;
		height: 350px;
		z-index: 5;
		order: 2;
	}

	.switch-container {
		display: flex;
		align-items: center;
		height: 320px;
		order: 1;
	}

	.switch-container.prev {
		flex-direction: row-reverse;
		order: 1;
	}

	.switch-container.next {
		order: 3;
	}

	.side-image-container {
		width: 230px;
		height: 320px;
		border-radius: 100px 100px 0 0;
		overflow: hidden;
		position: relative;
	}

	.main-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 100px 100px 0 0;
	}

	.switch-button {
		width: 40px;
		height: 40px;
		cursor: pointer;
		transition: transform 0.3s;
		z-index: 4;
		margin: 5px 7px;
	}

	.switch-button:hover {
		transform: scale(1.15);
	}

	.side-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 100px 100px 0 0;
	}

	.detail-button-container {
		display: flex;
		justify-content: center;
		margin-top: 35px;
		position: relative;
		z-index: 2;
	}

	.detail-button {
		position: relative;
		cursor: pointer;
		width: 300rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30px;
		background-color: #772e1b;
		color: white;
		font-weight: bold;
		font-family: '黑体';
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
		padding: 12rpx 24rpx;
	}

	.button-bg {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.button-text {
		position: relative;
		z-index: 1;
		font-size: 16px;
	}

	.container {
		font-family: Arial, sans-serif;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.beijin1 {
		width: 180%;
		height: auto;
		border-radius: 10px;
		margin: 40px auto;
		display: block;
		position: relative;
		left: -5%;
	}

	.jianyuan-text {
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 1.2em;
		color: #fff;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
		text-align: center;
		max-width: 80%;
	}

	.image-wrapper {
		position: absolute;
		top: -40px;
		left: -18px;
		width: 120px;
		height: 120px;
		z-index: 3;
	}

	.outline {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.inner-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90px;
		height: 90px;
		border-radius: 50%;
		z-index: 2;
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 70px;
		align-items: center;
		padding: 60rpx 25rpx 25rpx;
		border-radius: 15px;
		max-width: 90%;
		margin: 0 auto;
		height: 100vh;
		justify-content: center;
		margin-top: 125%;
	}

	.item {
		position: relative;
		display: flex;
		align-items: center;
		background-color: #f8f8e7;
		padding: 20px;
		border-radius: 25px;
		width: 95%;
		min-height: 120px;
		margin-left: auto;
		margin-right: 10px;
		font-size: 18px;
		font-weight: bold;
		font-family: '黑体';
	}

	.description {
		flex: 1;
		margin-left: 90px;
		font-size: 1.1em;
		color: #333;
		line-height: 1.5;
		align-self: flex-end;
		margin-bottom: 5px;
		letter-spacing: 3px;
		padding-left: 5px;
	}

	.heritage {
		color: #333;
		font-weight: bold;
		text-decoration: none;
		cursor: pointer;
		transition: all 0.3s;
	}

	.heritage:active {
		transform: scale(0.95);
		opacity: 0.8;
	}

	/* 美食列表容器 */
	.food-list {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	/* 美食列表容器 */
	.food-list {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	/* 美食卡片 */
	.food-card {
		background: linear-gradient(135deg, #fff8f0 0%, #fff0e6 100%);
		border: 1rpx solid #ffd4b8;
		border-radius: 25rpx;
		overflow: hidden;
		box-shadow:
			0 12rpx 40rpx rgba(255, 152, 0, 0.15),
			0 4rpx 12rpx rgba(255, 152, 0, 0.15);
		transition: all 0.3s ease;
		position: relative;
	}

	.food-card:active {
		transform: translateY(6rpx);
		box-shadow:
			0 6rpx 20rpx rgba(255, 152, 0, 0.25),
			0 2rpx 6rpx rgba(255, 152, 0, 0.15);
	}

	/* 图片容器 */
	.food-image-container {
		position: relative;
		height: 280rpx;
		overflow: hidden;
	}

	.food-image {
		width: 100%;
		height: 100%;
		transition: transform 0.4s ease;
	}

	.food-card:active .food-image {
		transform: scale(1.08);
	}

	.image-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80rpx;
		background: linear-gradient(to top, rgba(255, 248, 240, 0.95), transparent);
	}

	/* 内容区域 */
	.food-content {
		padding: 35rpx 30rpx;
		display: flex;
		align-items: flex-start;
		gap: 25rpx;
	}

	.food-description {
		flex: 1;
		font-size: 27rpx;
		font-weight: 600;
		line-height: 1.6;
		color: #2c3e50;
		text-align: justify;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.food-arrow {
		width: 70rpx;
		height: 70rpx;
		background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
	}

	.food-card:active .food-arrow {
		background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
		transform: translateX(10rpx);
		box-shadow: 0 6rpx 18rpx rgba(255, 152, 0, 0.4);
	}

	.arrow-icon {
		color: #fff;
		font-size: 36rpx;
		font-weight: 800;
	}

	/* 响应式适配 */
	@media (max-width: 750rpx) {
		.food-list {
			padding: 15rpx;
			gap: 25rpx;
		}

		.food-image-container {
			height: 240rpx;
		}

		.food-content {
			padding: 30rpx 25rpx;
		}

		.food-description {
			font-size: 28rpx;
			font-weight: 700;
			-webkit-line-clamp: 2;
		}
	}

	/* 非遗展示容器 */
	.cultural-showcase {
		min-height: 100vh;
		padding: 40rpx 0rpx;
		background: linear-gradient(135deg, #fef9f5 0%, #fdf4ec 50%, #fbf0e3 100%);
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
	}

	.cultural-showcase::before {
		content: '';
		position: absolute;
		top: 0;
		left: 5%;
		right: 5%;
		height: 2rpx;
		background: linear-gradient(90deg, transparent, #d4a574, transparent);
	}

	/* 展示主体 */
	.showcase-main {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
		margin-bottom: 50rpx;
		margin-top: 30rpx;
	}

	/* 侧边容器 */
	.showcase-side {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30rpx;
		flex: 1;
	}

	.showcase-left {
		align-items: flex-end;
	}

	.showcase-right {
		align-items: flex-start;
	}

	/* 预览框 */
	.preview-frame {
		width: 148rpx;
		height: 270rpx;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		box-shadow:
			0 15rpx 40rpx rgba(139, 69, 19, 0.15),
			inset 0 0 0 2rpx rgba(210, 180, 140, 0.3);
		transition: all 0.4s ease;
	}

	.preview-prev {
		transform: perspective(1000rpx) rotateY(15deg) scale(0.9);
	}

	.preview-next {
		transform: perspective(1000rpx) rotateY(-15deg) scale(0.9);
	}

	.preview-image {
		width: 100%;
		height: 100%;
	}

	.preview-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg, rgba(139, 69, 19, 0.1), transparent 60%);
	}

	/* 导航触发器 */
	.nav-trigger {
		width: 80rpx;
		height: 80rpx;
		position: relative;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.nav-trigger:active {
		transform: scale(0.9);
	}

	.nav-arrow {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 2;
		filter: drop-shadow(0 4rpx 8rpx rgba(139, 69, 19, 0.3));
	}

	.nav-glow {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 120%;
		height: 120%;
		background: radial-gradient(circle, rgba(210, 180, 140, 0.3) 0%, transparent 70%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.nav-trigger:active .nav-glow {
		opacity: 1;
	}

	/* 中心展示区 */
	.showcase-center {
		flex: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30rpx;
	}
	
	.main-title{
		font-size: 35rpx;
		font-weight: 600;
	}

	.main-display {
		width: 100%;
		height: 400rpx;
		border-radius: 35rpx;
		overflow: hidden;
		position: relative;
		box-shadow:
			0 25rpx 80rpx rgba(139, 69, 19, 0.25),
			0 10rpx 30rpx rgba(139, 69, 19, 0.15);
	}

	.display-image {
		width: 100%;
		height: 100%;
		transition: transform 0.6s ease;
	}

	.main-display:active .display-image {
		transform: scale(1.05);
	}

	.display-frame {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 3rpx solid rgba(210, 180, 140, 0.5);
		border-radius: 32rpx;
		pointer-events: none;
	}

	.display-shine {
		position: absolute;
		top: 0;
		left: -100%;
		width: 50%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
		transition: left 0.8s ease;
	}

	.main-display:active .display-shine {
		left: 100%;
	}

	/* 指示器 */
	.showcase-indicator {
		display: flex;
		gap: 15rpx;
		align-items: center;
	}

	.indicator-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background: #d2b48c;
		cursor: pointer;
		transition: all 0.3s ease;
		position: relative;
	}

	.indicator-dot.active {
		background: #8b4513;
		transform: scale(1.3);
		box-shadow: 0 0 20rpx rgba(139, 69, 19, 0.5);
	}

	.indicator-dot::after {
		content: '';
		position: absolute;
		top: -6rpx;
		left: -6rpx;
		right: -6rpx;
		bottom: -6rpx;
		border-radius: 50%;
		border: 2rpx solid transparent;
		transition: border-color 0.3s ease;
	}

	.indicator-dot.active::after {
		border-color: rgba(139, 69, 19, 0.3);
	}

	/* 操作区域 */
	.cultural-action {
		display: flex;
		justify-content: center;
		padding: 20rpx 0;
	}

	.action-btn {
		position: relative;
		cursor: pointer;
		display: flex;
		align-items: center;
		transition: all 0.4s ease;
	}

	.action-btn:active {
		transform: translateY(8rpx);
	}

	.btn-main {
		background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
		padding: 28rpx 60rpx;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		position: relative;
		z-index: 2;
		box-shadow:
			0 15rpx 40rpx rgba(139, 69, 19, 0.4),
			0 5rpx 20rpx rgba(139, 69, 19, 0.3);
	}

	.btn-ornament {
		width: 30rpx;
		height: 4rpx;
		background: #8b4513;
		border-radius: 2rpx;
		opacity: 0.6;
		transition: all 0.3s ease;
	}

	.action-btn:active .btn-ornament {
		width: 50rpx;
		opacity: 0.8;
	}

	.btn-text {
		color: #fff;
		font-size: 34rpx;
		font-weight: 700;
		letter-spacing: 2rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}

	.btn-icon {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		transition: transform 0.3s ease;
	}

	.action-btn:active .btn-icon {
		transform: translateX(15rpx) rotate(10deg);
	}

	.btn-glow {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 120%;
		height: 200%;
		background: radial-gradient(ellipse, rgba(210, 180, 140, 0.2) 0%, transparent 60%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.action-btn:active .btn-glow {
		opacity: 1;
	}

	/* 响应式适配 */
	@media (max-width: 750rpx) {
		.cultural-showcase {
			padding: 30rpx 20rpx;
		}

		.showcase-main {
			gap: 15rpx;
		}

		.preview-frame {
			width: 150rpx;
			height: 200rpx;
		}

		.main-display {
			height: 350rpx;
		}

		.nav-trigger {
			width: 70rpx;
			height: 70rpx;
		}

		.btn-main {
			padding: 24rpx 50rpx;
		}

		.btn-text {
			font-size: 30rpx;
		}
	}
	
	/* 文化特色亮点 */
	.cultural-highlights {
	  padding: 40rpx 30rpx 20rpx;
	}
	
	.highlights-header {
	  text-align: center;
	  margin-bottom: 40rpx;
	}
	
	.highlights-title {
	  display: block;
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #8b4513;
	  margin-bottom: 20rpx;
	}
	
	.title-decoration {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 20rpx;
	}
	
	.decoration-line {
	  width: 80rpx;
	  height: 2rpx;
	  background: linear-gradient(90deg, transparent, #d4a574, transparent);
	}
	
	.decoration-icon {
	  font-size: 24rpx;
	  color: #d4a574;
	}
	
	.highlights-grid {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 30rpx;
	}
	
	.highlight-item {
	  background: linear-gradient(135deg, #fffaf0, #fff5e6);
	  border: 1rpx solid #ffedd5;
	  border-radius: 20rpx;
	  padding: 30rpx 25rpx;
	  text-align: center;
	  transition: all 0.3s ease;
	}
	
	.highlight-item:active {
	  transform: translateY(-4rpx);
	  box-shadow: 0 8rpx 25rpx rgba(139, 69, 19, 0.15);
	}
	
	.highlight-icon {
	  font-size: 48rpx;
	  margin-bottom: 20rpx;
	}
	
	.highlight-title {
	  display: block;
	  font-size: 28rpx;
	  font-weight: 600;
	  color: #8b4513;
	  margin-bottom: 10rpx;
	}
	
	.highlight-desc {
	  display: block;
	  font-size: 24rpx;
	  color: #a0522d;
	  line-height: 1.4;
	}
	
	/* 相关推荐 */
	.related-culture {
	  padding: 30rpx;
	  margin: 20rpx 0;
	}
	
	.related-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 30rpx;
	}
	
	.related-title {
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #8b4513;
	}
	
	.related-more {
	  font-size: 26rpx;
	  color: #a0522d;
	}
	
	.related-scroll {
	  white-space: nowrap;
	}
	
	.related-list {
	  display: inline-flex;
	  gap: 25rpx;
	}
	
	.related-item {
	  display: inline-flex;
	  flex-direction: column;
	  width: 200rpx;
	  background: white;
	  border-radius: 20rpx;
	  overflow: hidden;
	  box-shadow: 0 6rpx 20rpx rgba(139, 69, 19, 0.1);
	  transition: all 0.3s ease;
	}
	
	.related-item:active {
	  transform: scale(0.95);
	}
	
	.related-image {
	  width: 200rpx;
	  height: 120rpx;
	}
	
	.related-info {
	  padding: 20rpx 15rpx;
	}
	
	.related-name {
	  display: block;
	  font-size: 26rpx;
	  font-weight: 600;
	  color: #8b4513;
	  margin-bottom: 8rpx;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	
	.related-type {
	  display: block;
	  font-size: 22rpx;
	  color: #a0522d;
	  background: #fffaf0;
	  padding: 4rpx 12rpx;
	  border-radius: 12rpx;
	  text-align: center;
	}
	
	/* 文化数据统计 */
	.culture-stats {
	  padding: 30rpx 0rpx;
	}
	
	.stats-card {
	  background: linear-gradient(135deg, #8b4513, #a0522d);
	  border-radius: 25rpx;
	  padding: 40rpx 30rpx;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  box-shadow: 0 10rpx 30rpx rgba(139, 69, 19, 0.3);
	}
	
	.stat-item {
	  text-align: center;
	  flex: 1;
	}
	
	.stat-number {
	  display: block;
	  font-size: 42rpx;
	  font-weight: bold;
	  color: #ffffff;
	  margin-bottom: 10rpx;
	}
	
	.stat-label {
	  display: block;
	  font-size: 24rpx;
	  color: rgba(255, 255, 255, 0.9);
	}
	
	.stat-divider {
	  width: 1rpx;
	  height: 60rpx;
	  background: linear-gradient(transparent, rgba(255, 255, 255, 0.5), transparent);
	}
	
	/* 响应式适配 */
	@media (max-width: 750rpx) {
	  .highlights-grid {
	    grid-template-columns: 1fr;
	    gap: 20rpx;
	  }
	  
	  .related-item {
	    width: 180rpx;
	  }
	  
	  .related-image {
	    width: 180rpx;
	    height: 100rpx;
	  }
	  
	  .stat-number {
	    font-size: 36rpx;
	  }
	}
</style>